{% extends './base.html' %}
{% block title %}
<title>{{page_title}}-登錄</title>

<!-- CSS Page Style -->
<link rel="stylesheet" href="/public/assets/new/css/pages/log-reg-v3.css">


{% endblock %}
{% block body %}

    <!--=== Breadcrumbs v4 ===-->
    <div class="breadcrumbs-v4">
        <div class="container">
            <!-- <span class="page-name">修改密碼</span> -->
            <h1>請輸入新的帳戶密碼 <span class="shop-green"></span></h1>
            <ul class="breadcrumb-v4-in">
                <li><a href="/">首頁</a></li>
                <li><a href="/shop/login">登錄</a></li>
                <li class="active">修改密碼</li>
            </ul>
        </div><!--/end container-->
    </div> 
    <!--=== End Breadcrumbs v4 ===-->

    <!--=== Login ===-->
    <div class="log-reg-v3 content-md">
        <div class="container">
            <div class="row">
                <div class="col-md-7 md-margin-bottom-50">
                    <h2 class="welcome-title">歡迎來到WBIOKR商城</h2>
                    <p>WBIOKR商城是女裝在線購買平臺，WBIOKR商城是女裝在線購買平臺WBIOKR商城是女裝在線購買平臺</p><br>
                    <div class="info-block-v2">
                        <i class="icon icon-layers"></i>
                        <div class="info-block-in">
                            <h3>多渠道</h3>
                            <p>WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商，WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商</p>
                        </div>    
                    </div>    
                    <div class="info-block-v2">
                        <i class="icon icon-settings"></i>
                        <div class="info-block-in">
                            <h3>質量好</h3>
                            <p>WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商</p>
                        </div>    
                    </div>
                    <div class="info-block-v2">
                        <i class="icon icon-paper-plane"></i>
                        <div class="info-block-in">
                            <h3>售後保障</h3>
                            <p>WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商WBIOKR商城衣服來自於廣州、杭州、廈門等地方廠商</p>
                        </div>    
                    </div>
                </div>

                <div class="col-md-5">
                    <form id="sky-form-reset" class="log-reg-block sky-form">
                        <h2>設置密碼</h2>

                        <section>
                            <label class="input login-input">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                    <input type="email" placeholder="請輸入郵箱" name="email" class="form-control k-username">
                                </div>
                            </label>
                        </section>        
                        <section>
                            <label class="input login-input no-border-top">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                    <input type="password" placeholder="請輸入原始密碼" name="oldPassword" class="form-control k-oldPassword">
                                </div>    
                            </label>
                        </section>
                        <section>
                            <label class="input login-input no-border-top">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                    <input type="password" placeholder="請輸入新密碼" name="newPassword" class="form-control k-newPassword">
                                </div>    
                            </label>
                        </section>
                        <section>
                            <label class="input login-input no-border-top">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                    <input type="password" placeholder="請輸入確認密碼" name="rePassword" class="form-control k-rePassword">
                                </div>    
                            </label>
                        </section>
                        <!-- <div class="row margin-bottom-5">
                            <div class="col-xs-6">
                                <label class="checkbox">
                                    <input type="checkbox" name="checkbox" class="k-remeber" />
                                    <i></i>
                                    記住我
                                </label>
                            </div>
                            <div class="col-xs-6 text-right">
                                <a href="/shop/reset">忘記密碼?</a>
                            </div>
                        </div> -->
                        <div id="label_error" class="c-red">
                        </div>
                        <button class="btn-u btn-u-sea-shop btn-block margin-bottom-20" type="submit">修 改</button>

                        <!-- <div class="border-wings">
                            <span>or</span>
                        </div>
                            
                        <div class="row columns-space-removes">
                            <div class="col-lg-6 margin-bottom-10">
                                <button type="button" class="btn-u btn-u-md btn-u-fb btn-block"><i class="fa fa-facebook"></i> Facebook Log In</button>
                            </div>
                            <div class="col-lg-6">
                                <button type="button" class="btn-u btn-u-md btn-u-tw btn-block"><i class="fa fa-twitter"></i> Twitter Log In</button>
                            </div>
                        </div> -->
                    </form>
                    
                    <div class="margin-bottom-20"></div>
                    <p class="text-center">沒有帳號? 請跳轉至 <a href="/shop/signIn">註冊</a>頁面</p>
                </div>
            </div><!--/end row-->
        </div><!--/end container-->
    </div>
    <!--=== End Login ===-->     

    <!--=== Shop Suvbscribe ===-->
    <!-- <div class="shop-subscribe">
        <div class="container">
            <div class="row">
                <div class="col-md-8 md-margin-bottom-20">
                    <h2>subscribe to our weekly <strong>newsletter</strong></h2>
                </div>  
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Email your email...">
                        <span class="input-group-btn">
                            <button class="btn" type="button"><i class="fa fa-envelope-o"></i></button>
                        </span>
                    </div>    
                </div>
            </div>
        </div>
    </div> -->
    <!--=== End Shop Suvbscribe ===-->


<!-- Login Form -->
<script src="/public/assets/new/plugins/sky-forms/version-2.0.1/js/jquery.form.min.js"></script>
<!-- Validation Form -->
<script src="/public/assets/new/plugins/sky-forms/version-2.0.1/js/jquery.validate.min.js"></script>
<!-- <script src="/public/assets/new/js/forms/page_login.js"></script> -->
<script src="/public/assets/new/js/forms/page_contact_form.js"></script>
<!-- <script src="/public/assets/common/jquery/jquery.validate.min.js"></script> -->
<script src="/public/assets/common/jquery/messages_zh.min.js"></script>
<script src="/public/assets/common/jsencrypt.min.js"></script>

<script>

    var Reset = function () {

        return {
            
            //Masking
            initLogin: function () {
              // Validation for login form
              $("#sky-form-reset").validate({
                  // Rules for form validation
                  rules:
                  {
                      email:
                      {
                          required: true,
                          email: true
                      },
                      oldPassword:
                      {
                          required: true,
                          // minlength: 3,
                          // maxlength: 20
                      },
                      newPassword:
                      {
                          required: true,
                          // minlength: 3,
                          // maxlength: 20
                      },
                      rePassword:
                      {
                          required: true,
                          // minlength: 3,
                          // maxlength: 20
                      },
                  },
                                      
                  // Messages for form validation
                  messages:
                  {
                      email:
                      {
                          required: '請輸入郵箱',
                          email: '請輸入郵箱'
                      },
                      oldPassword:
                      {
                          required: '請輸入原始密碼'
                      },
                      newPassword:
                      {
                          required: '請輸入新密碼',
                          // minlength: 3,
                          // maxlength: 20
                      },
                      rePassword:
                      {
                          required: '請輸入確認密碼',
                          // minlength: 3,
                          // maxlength: 20
                      },
                  },                  
                  
                  // Do not change code below
                  errorPlacement: function(error, element)
                  {
                      error.insertAfter(element.parent());
                  },

                  submitHandler: function (form) {
                      //Ap.loading.start();
                      // console.log(121, form, arguments)
                      // return
                      // console.log(Ap)
                      // return
                      if ($('#sky-form-reset .k-newPassword').val() !== $('#sky-form-reset .k-rePassword').val()) {
                          $('#label_error').html('兩次密碼輸入不一致');
                          return
                      }
                      let encrypt = new JSEncrypt();
                      encrypt.setPublicKey(public_key);
                      let json = {username: $('#sky-form-reset .k-username').val(), password: $('#sky-form-reset .k-newPassword').val(), oldPassword: $('#sky-form-reset .k-oldPassword').val()};
                      let data = JSON.stringify(json);
                      let encrpted = encrypt.encrypt(data);
                      Ap.request.post('/shop/reset', {content: encrpted}, function (res) {
                          //Ap.loading.end();
                          if (res.success) {
                              // window.location = '/'
                              window.history.back();
                          } else {
                              $('#label_error').html(res.msg);
                          }
                      });
                  }
              });
            }

        };

    }();

    jQuery(document).ready(function() {
        Reset.initLogin();
        PageContactForm.initPageContactForm();
        StyleSwitcher.initStyleSwitcher();      
    });
</script>
{% endblock %}